<template>
  <div class="alternative">
    <div class="alternative_header">
      <h3>我的备选志愿</h3>
      <div class="input">
        <el-input v-model="input" placeholder="请输入志愿表名"></el-input>&nbsp; &nbsp; &nbsp;
        <div>
<<<<<<< HEAD
          <el-button type="primary" v-if="  input.length == '' " disabled>保存志愿表</el-button>
=======
          <el-button
            type="primary"
            v-if="checkList.length == 0  ||  input.length == '' "
            disabled
          >保存志愿表</el-button>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <el-button type="primary" @click="addVolunteer()" v-else>保存志愿表</el-button>
        </div>
      </div>

      <el-dropdown split-button @command="handleGender">
<<<<<<< HEAD
        {{batchs.batchName}}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in BatchIDList"
            :key="item.id"
            :command="item"
          >{{item.batchName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="alternative_bottom_box">
      <div class="box_in">
        <div class="nullList" v-if="BatchIDList[BatchsNumId].Arr.length == '0' ">
          <h4>暂无数据</h4>
          <router-link to="/School" tag="span">
            <el-button type="primary">
              <i class="el-icon-plus"></i> 添加备选
            </el-button>
          </router-link>
        </div>
        <div class="alternative_bottom" v-else>
          <div
            v-for="  (tiem ,index)  in BatchIDList[BatchsNumId].Arr"
            :key="tiem.alternativeFormId"
            class="alternativeDeatil"
          >
            <div class="cutABC">
              <el-tooltip
                :content="BatchIDList[BatchsNumId].batchName +'选择的学校数不能超过' + Undergraduate.schoolNumber + '所' "
                placement="top"
                v-if="BatchIDList[BatchsNumId].arr.length  == Undergraduate.schoolNumber"
              >
                <el-checkbox-group
                  v-model="BatchIDList[BatchsNumId].arr"
                  :min="0"
                  :max="Undergraduate.schoolNumber"
                >
                  <el-checkbox :label="tiem">ID: {{tiem.schoolId}}</el-checkbox>
                </el-checkbox-group>
              </el-tooltip>
              <el-checkbox-group
                v-else
                v-model="BatchIDList[BatchsNumId].arr"
                :min="0"
                :max="Undergraduate.schoolNumber"
              >
                <el-checkbox :label="tiem">ID: {{tiem.schoolId}}</el-checkbox>
              </el-checkbox-group>

              <el-button type="primary" circle>{{indexToStringList[index]}}</el-button>
            </div>
            <div class="Choice headers_Alternative">
              <div class="header_school Alternative">
                <div>
                  <img :src="tiem.logoUrl" />
                  <i class="schoolName">{{tiem.schoolName}}</i>
                  <span>{{tiem.uniCity}}</span>
                </div>
                <div class="cutAlternative">
                  <el-button
                    type="danger"
                    @click="cutAlternativeList(tiem.schoolId)"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </div>
              <div class="Deatil">
                <div class="Deatil_left">
                  <p>
                    {{tiem.year}}年录取最低分
                    <span>{{tiem.minScore}}</span>
                  </p>
                  <p>
                    {{tiem.year}}年录取最低排名
                    <span>{{tiem.minRanking}}</span>
                  </p>
                </div>
                <div class="Deatil_right">
                  <!-- <p>
                录取概率
                <i>(VIP可见)</i>
                  </p>-->
                  <p>
                    {{tiem.year}}年招生
                    <span></span>
                  </p>
                </div>
              </div>
            </div>

            <div
              class="Choice major"
              v-for="(list ,indexs) in tiem.subjectVoList"
              :key="list.alternativeMajorId"
            >
              <div class="header_school Alternative">
                <i>{{list.category}}</i>
                <div class="cutAlternative">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="cutAlternativeMajor(list.majorAllId ,list.schoolId, indexs)"
                    circle
                  ></el-button>
                </div>
              </div>
              <div class="Deatil">
                <div class="Deatil_left">
                  <p>
                    {{list.year}}年录取最低分
                    <span>{{list.minScore}}</span>
                  </p>
                  <p>
                    {{list.year}}年录取最低排名
                    <span>{{list.minRanking}}</span>
                  </p>
                </div>
                <div class="Deatil_right">
                  <br />
                  <br />
                  <p>
                    {{list.year}}年招生
                    <span>{{list.planNum}}人</span>
                  </p>
                </div>
              </div>
            </div>
            <!-- <div class="addMajor">
=======
        {{batchs == U.id ? U.batchName : S.batchName  }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="U.id">{{U.batchName}}</el-dropdown-item>
          <el-dropdown-item :command="S.id">{{S.batchName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="nullList" v-if="MyAlternativeList.length == '0' ">
      <h4>暂无数据</h4>
      <el-button type="primary">
        <router-link to="/volunteer" tag="div">
          <i class="el-icon-plus"></i> 添加备选
        </router-link>
      </el-button>
    </div>
    <div class="alternative_bottom" v-else>
      <div
        v-for="  (tiem ,index)  in MyAlternativeList"
        :key="tiem.alternativeFormId"
        class="alternativeDeatil"
      >
        <div class="cutABC">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="tiem">ID: {{tiem.schoolId}}</el-checkbox>
          </el-checkbox-group>

          <el-button type="primary" circle>{{String.fromCharCode(64 + parseInt(index+1))}}</el-button>
        </div>
        <div class="Choice headers_Alternative">
          <div class="header_school Alternative">
            <div>
              <img :src="tiem.logoUrl" />
              <i class="schoolName">{{tiem.schoolName}}</i>
              <span>{{tiem.uniCity}}</span>
            </div>
            <div class="cutAlternative">
              <el-button
                type="danger"
                @click="cutAlternativeList(tiem.schoolId)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </div>
          </div>
          <div class="Deatil">
            <div class="Deatil_left">
              <p>
                {{tiem.year}}年录取最低分
                <span>{{tiem.minScore}}</span>
              </p>
              <p>
                {{tiem.year}}年录取最低排名
                <span>{{tiem.minRanking}}</span>
              </p>
            </div>
            <div class="Deatil_right">
              <!-- <p>
                录取概率
                <i>(VIP可见)</i>
              </p>-->
              <p>
                {{tiem.year}}18年招生
                <span></span>
              </p>
            </div>
          </div>
        </div>

        <div
          class="Choice major"
          v-for="(list ,indexs) in tiem.subjectVoList"
          :key="list.alternativeMajorId"
        >
          <div class="header_school Alternative">
            <i>{{list.category}}</i>
            <div class="cutAlternative">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="cutAlternativeMajor(list.majorAllId ,list.schoolId)"
                circle
              ></el-button>
            </div>
          </div>
          <div class="Deatil">
            <div class="Deatil_left">
              <p>
                {{list.year}}年录取最低分
                <span>{{list.minScore}}</span>
              </p>
              <p>
                {{list.year}}年录取最低排名
                <span>{{list.minRanking}}</span>
              </p>
            </div>
            <div class="Deatil_right">
              <br />
              <br />
              <p>
                {{list.year}}年招生
                <span>{{list.planNum}}人</span>
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="addMajor">
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <el-button
            @click="addMajor(tiem.schoolId , tiem.id , tiem.schoolName)"
            type="primary"
            plain
          >
            <i class="el-icon-plus"></i>添加更多专业
          </el-button>
<<<<<<< HEAD
            </div>-->
          </div>
        </div>
      </div>
    </div>

=======
        </div>-->
      </div>
    </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
    <!-- <div class="Write" v-if="WriteType ==  1 ">
      <div class="Write_major">
        <div class="name_lists_header">
          <div class="Choose_Major">
            <i class="el-icon-close" v-on:click="WriteType =  0"></i>
            <span>请将您想上的专业添加入备选</span>
            <div @click="AddMajorAllId">完成</div>
          </div>
        </div>
        <div class="schools_name">{{schoolName}}</div>
        <div class="name_lists_bottom">
          <div class="lists_bottom">
            <ul>
              <li v-for=" (list  , index) in majorList" :key="index">
                <div class="lists_bottom_left">
                  <h3>{{list.majIntroduce}}</h3>
                  <div class="lists_bottom_left_bottom">
                    <p>
                      18年录取最低排名
                      <span>{{list.minRanking != '' ? list.minRanking : "null" }}</span>
                    </p>
                    <p>
                      18年招生人数
                      <span>{{list.planNum != '' ? list.planNum : "null"}}</span>
                    </p>
                    <p>
                      18年录取最低分
                      <span>{{list.minScore != '' ? list.minScore : "null"}}</span>
                    </p>
                  </div>
                </div>
                <div class="lists_bottom_button">
                  <el-button
                    type="primary"
                    v-if="majorAllIds.indexOf(list.majorAllId) == -1 "
                    @click="addMjaorID(list.majorAllId,list.admissionMajorId ,index) "
                  >
                    <i class="el-icon-plus"></i> 备选专业
                  </el-button>
                  <el-button
                    type="warning"
                    v-else
                    @click="cutMjaorID(list.majorAllId,list.admissionMajorId) "
                  >
                    <i class="el-icon-check"></i> 以加备选
                  </el-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>-->
  </div>
</template>

<script>
export default {
  name: "Alternative",
  data() {
    return {
<<<<<<< HEAD
=======
      U: "",
      S: "",
>>>>>>> 314b442cce11d658746227581b0160373004c345
      Undergraduate: "",
      Specialty: "",
      radio: " ",
      MyAlternativeList: [],
<<<<<<< HEAD
      batchs: "",
=======
      batchs:'',
>>>>>>> 314b442cce11d658746227581b0160373004c345
      checkList: [],
      input: "",
      schollIds: "",
      WriteType: "",
      majorList: [],
      majorAllIds: [],
      MajorIds: [],
      schoolListID: [],
      Alternative: false,
      schoolID: "",
      majorListID: [],
      ojdID: "",
<<<<<<< HEAD
      ojdmajor: "",
      BatchIDList: "",
      BatchsNumId: 0,
      indexToStringList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ]
    };
  },

  methods: {
    open3(s) {
      this.$message.error(s);
    },
    open1(g) {
      this.$message({
        message: g,
        type: "success"
      });
    },
    openFullScreen(t, s) {
      const loading = this.$loading({
        lock: true,
        text: t,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "loadingSize"
      });
      setTimeout(() => {
        loading.close();
      }, s);
    },
    //获取备选列表
    getMyAlternative() {
      if (this.BatchIDList[this.BatchsNumId].Arr.length == 0) {
        this.$ajax({
          method: "POST",
          url: "/api/volunteer/voluntaryTest?batch=" + this.batchs.id,

          success: res => {
            if (res.data.code == 0) {
              this.BatchIDList[this.BatchsNumId].Arr = res.data.data;
            } else {
              this.open3(res.data.msg);
            }
          }
        });
      }
    },
    //删除学校
=======
      ojdmajor: ""
    };
  },
  methods: {
    getMyAlternative() {
      this.$ajax({
        method: "POST",
        url: "/api/volunteer/voluntaryTest?batch=" + this.batchs,

        success: res => {
          if (res.data.code == 0) {
            this.MyAlternativeList = res.data.data;
          }
        }
      });
    },
>>>>>>> 314b442cce11d658746227581b0160373004c345
    cutAlternativeList(ID) {
      this.$ajax({
        method: "GET",
        url: "/api/volunteer/delete/alternativeSchool?schoolId=" + ID,

        success: res => {
          if (res.data.code == 0) {
<<<<<<< HEAD
            this.open1("删除" + res.data.msg);
            var index = this.BatchIDList[this.BatchsNumId].Arr.map(
              A => A.schoolId
            ).indexOf(ID);
            this.indexToStringList.splice(index, 1);
            this.BatchIDList[this.BatchsNumId].Arr.splice(index, 1);
          } else {
            this.open3(res.data.msg);
=======
            this.getMyAlternative();
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
<<<<<<< HEAD
    // 删除专业
    cutAlternativeMajor(majorId, Id, I) {
=======

    cutAlternativeMajor(majorId, schoolId) {
>>>>>>> 314b442cce11d658746227581b0160373004c345
      this.$ajax({
        method: "POST",
        url: "/api/volunteer/delete/alternativeMajor",
        data: {
          majorAllId: majorId,
<<<<<<< HEAD
          schoolId: Id
        },
        success: res => {
          if (res.data.code == 0) {
            this.open1("删除" + res.data.msg);
            var index = this.BatchIDList[this.BatchsNumId].Arr.map(
              A => A.schoolId
            ).indexOf(Id);

            this.BatchIDList[this.BatchsNumId].Arr[index].subjectVoList.splice(
              I,
              1
            );
          } else {
            this.open3(res.data.msg);
=======
          schoolId: schoolId
        },
        success: res => {
          if (res.data.code == 0) {
            this.getMyAlternative();
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
<<<<<<< HEAD
    //切换批次
    handleGender(Batchs) {
      this.batchs = Batchs;
      var index = this.BatchIDList.map(t => t.id).indexOf(Batchs.id);
      this.BatchsNumId = index;
      this.getMyAlternative();
      this.getMajorNum();
=======
    handleGender(Batchs) {
      if (Batchs == this.U.id) {
        this.batchs = Batchs;
      } else if (Batchs == this.S.id) {
        this.batchs = Batchs;
      }
      this.getMyAlternative();
>>>>>>> 314b442cce11d658746227581b0160373004c345
    },
    addMajor(ID, id, SchoolName) {
      this.schollIds = id;
      console.log(id);
      this.WriteType = 1;
      this.schoolName = SchoolName;

      this.schoolID = ID;
      this.$ajax({
        method: "GET",
        url: "/api/volunteer/voluntaryTest1/" + ID,

        success: res => {
          if (res.data.code == 0) {
            this.majorList = res.data.data;
          }
        }
      });
    },

<<<<<<< HEAD
    // addMjaorID(ID, id, index) {
    //   if (id != "") {
    //     this.MajorIds.push(id);
    //   } else {
    //     this.MajorIds.push("string");
    //   }

    //   this.majorAllIds.push(ID);
    // },
    // 保存志愿表
    addVolunteer() {
      if (this.input == "") {
        this.open3("请输入表单名称");
      } else {
        var arrs = [];
        this.BatchIDList.map(B => {
          B.arr.map(M => {
            arrs.push(M);
          });
        });
        if (arrs.length == 0) {
          this.open3("请选择学校再保存");
        } else {
          this.openFullScreen("正在保存", 1000);
          var lists = arrs.map((item, index, ary) => {
            var schoolIds = item.schoolId;

            var majorAllIds = item.subjectVoList.map((items, indexs, arys) => {
              var ID = items.majorAllId;
              return ID;
            });
            var newMajorAllIds = majorAllIds.join();
            var NewMajorAllIds = newMajorAllIds.replace(/\[.*?\]/g, "");

            return {
              schoolId: schoolIds,
              batch: item.batch,
              majorAllIds: NewMajorAllIds
            };
          });

          this.$ajax({
            method: "POST",
            url: "/api/volunteer/save/volunteer",
            data: {
              alternativeType: 1,
              volunteerId: 0,
              volunteerName: this.input,
              volunteerSchoolEntities: lists
            },
            success: res => {
              if (res.data.code == 0) {
                this.BatchIDList = [];
                this.input = "";
                this.getBatch();
                this.open1("保存" + res.data.msg);
              } else {
                this.open3("保存" + res.data.msg);
              }
            }
          });
        }
      }
    },
    //获取批次
=======
    addMjaorID(ID, id, index) {
      console.log(id);
      if (id != "") {
        this.MajorIds.push(id);
      } else {
        this.MajorIds.push("string");
      }

      this.majorAllIds.push(ID);
    },
    addVolunteer() {
      var arrs = this.checkList;
      var lists = arrs.map((item, index, ary) => {
        var schoolIds = item.schoolId;

        var majorAllIds = item.subjectVoList.map((items, indexs, arys) => {
          var ID = items.majorAllId;
          return ID;
        });
        var newMajorAllIds = majorAllIds.join();
        var NewMajorAllIds = newMajorAllIds.replace(/\[.*?\]/g, "");

        return {
          schoolId: schoolIds,
          batch: item.batch,
          majorAllIds: NewMajorAllIds
        };
      });

      this.$ajax({
        method: "POST",
        url: "/api/volunteer/save/volunteer",
        data: {
          alternativeType: 1,
          volunteerId: 0,
          volunteerName: this.input,
          volunteerSchoolEntities: lists
        },
        success: res => {
          if (res.data.code == 0) {
            this.checkList = [];
            this.input = "";
          }
        }
      });
    },
>>>>>>> 314b442cce11d658746227581b0160373004c345
    getBatch() {
      this.$ajax({
        method: "POST",
        url: "/api/voluntary/targetBatch",

        success: res => {
          if (res.data.code == 0) {
            var Batch = res.data.data.suitableBatch;
<<<<<<< HEAD
            this.BatchIDList = Batch.map(b => {
              return {
                batchName: b.batchName,
                batchType: b.batchType,
                id: b.id,
                arr: [],
                Arr: ""
              };
            });
            this.batchs = res.data.data.suitableBatch[0];

=======
            var s = [];
            Batch.forEach(e => {
              s.push(e);
              return s;
            });
            this.U = s[0];
            this.S = s[1];
            this.Batchs = this.U.id
>>>>>>> 314b442cce11d658746227581b0160373004c345
            this.getMajorNum();

            this.getMyAlternative();
          }
        }
      });
    },
<<<<<<< HEAD
    //限制学校数
    getMajorNum() {
      var ID = this.batchs.id;
      if (ID == 4) {
        this.Undergraduate = {
          batch: "",
          id: "",
          majorNumber: 40,
          maxNumber: "",
          provinceId: "",
          schoolNumber: 40
        };
      } else {
        this.$ajax({
          method: "GET",
          url: "/api/volunteerNum/schoolNum/" + ID,
          success: res => {
            if (res.data.code == 0) {
              this.Undergraduate = res.data.data;
            }
          }
        });
      }
=======
    getMajorNum() {
      this.$ajax({
        method: "GET",
        url: "/api/volunteerNum/schoolNum/" + this.U.id,

        success: res => {
          if (res.data.code == 0) {
            this.Undergraduate = res.data.data;
          }
        }
      });
      this.$ajax({
        method: "GET",
        url: "/api/volunteerNum/schoolNum/" + this.S.id,

        success: res => {
          if (res.data.code == 0) {
            this.Specialty = res.data.data;
          }
        }
      });
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },

  beforeCreate() {
    this.$nextTick(() => {
      this.getBatch();
    });
  }
<<<<<<< HEAD

=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
  // 添加更多专业(暂无数据不完整)
  // AddMajorAllId() {
  //   let addIDs = this.majorAllIds;

  //   let addID = addIDs.join();
  //   let NewMajorAllIds = addID.replace(/\[.*?\]/g, "");
  //   var ojdIDs = {};
  //   var ojdIDs = NewMajorAllIds;
  //   this.ojdID = ojdIDs;

  //   let addids = this.MajorIds;

  //   let addid = addids.join();
  //   let NewIds = addid.replace(/\[.*?\]/g, "");
  //   var ojdids = {};
  //   var ojd = NewIds;
  //   this.ojdmajor = ojd;

  //   this.$ajax({
  //     method: "POST",
  //     url: "/api/volunteer/save/alternative",
  //     data: {
  //       batch: "0",

  //       admissionDetailsId: this.schollIds,
  //       admissionMajorId: this.ojdmajor,
  //       alternativeType: 1,

  //       majorAllIds: this.ojdID,
  //       schoolId: this.schoolID
  //     },
  //     success: res => {
  //       if (res.data.code == 0) {
  //         this.Alternative = true;
  //         this.schoolListID.push(this.schoolID);
  //         this.schoolID = "";
  //         this.majorListID.push(this.ojdID);
  //         this.ojdID = "";
  //         this.ojdmajor = "";
  //         this.WriteType = 0;
  //         this.majorAllIds = [];
  //         this.getMyAlternative();
  //       }
  //     }
  //   });
  // },
};
</script>

<style lang="scss">
<<<<<<< HEAD
.el-loading-spinner {
  font-size: 20px;

  .el-loading-text {
    color: #409eff;
    margin: 10px 0;
    font-size: 20px;
  }

  .el-icon-loading {
    font-size: 40px;
  }
}
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
.alternative {
  width: 100%;
  .alternative_header {
    height: 72px;
    background: #ffffff;

    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .input {
      width: 320px;
      display: flex;
    }
    h3 {
      color: #414141;
      font-size: 16px;
    }
  }

  .alternative_bottom {
<<<<<<< HEAD
=======
    margin-top: 24px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
    width: 100%;
    .cutABC {
      width: 860px;
      margin-left: 30px;
      display: flex;
      justify-content: space-between;
    }
    .alternativeDeatil {
      background: #ffffff;
      border-radius: 10px 10px 0 0;
      width: 100%;
      padding-top: 28px;
      margin-bottom: 12px;

      .header_school {
        padding-bottom: 18px;
        padding-left: 66px;

        img {
          width: 20px;
          margin: 0 6px;
          position: relative;
          top: 4px;
        }

        span {
          color: #787878;
        }
      }
      .Deatil {
        display: flex;
        padding-left: 120px;
        p {
          margin-bottom: 20px;
          color: #838383;
          font-size: 14px;
          span {
            color: #4f4f4f;
          }
          i {
            color: #fce79d;
          }
        }
        .Deatil_right {
          margin-left: 32px;
        }
      }
    }
    .Alternative {
      display: flex;
      justify-content: space-between;
      i {
        font-size: 18px;
      }
      .schoolName {
        padding-right: 10px;
      }
      .cutAlternative {
        margin-right: 66px;
      }
    }
    .headers_Alternative {
      width: 850px;
      border-bottom: 2px solid #ebeef5;
      padding: 10px 10px;
      margin: 0 auto;
      margin-bottom: 20px;
    }
    .major {
      .header_school {
        i {
          font-size: 14px;
        }
      }
    }
    .addMajor {
      padding: 20px;
      width: 100px;
      margin: 0 auto;
      .el-button {
        border: 2px dotted;
      }
    }
  }
  .nullList {
    margin: 100px auto;
    width: 128px;
    height: 100px;
    h4 {
      text-align: center;
      padding: 20px 0;
    }
  }
<<<<<<< HEAD
  .alternative_bottom_box {
    margin-top: 24px;
    width: 100%;
    overflow: hidden;
    .box_in {
      padding-right: 100px;
      overflow-y: auto;
      width: 102%;
      height: 682px;
    }
  }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
.Write {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.4);
  z-index: 1100;
  .Write_major {
    width: 480px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 550px;
    margin: 0 auto;
    margin-top: 30px;
    .schools_name {
      color: #757575;

      background: #f8f8f8;
      padding: 12px 18px;
    }
    .name_lists_header {
      padding-top: 34px;
      .Choose_Major {
        padding: 0 18px;
        display: flex;

        div {
          color: rgb(67, 149, 243);
          padding: 10px;
          font-size: 18px;
          margin-left: 52px;
          cursor: pointer;
        }
        span {
          font-size: 18px;
          padding: 12px 0;
        }
        i {
          color: #c8c8c8;
          font-size: 20px;
          padding: 12px 12px;
        }
      }
    }
    .name_lists_bottom {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding-right: 50px;

      .lists_bottom {
        width: 200px;
        padding-bottom: 130px;
        > ul {
          li {
            display: block;
            width: 340%;
            display: flex;
            padding-left: 44px;
            padding-top: 26px;
            padding-bottom: 10px;
            border-bottom: 8px #f8f8f8 solid;
            .lists_bottom_left {
              width: 280px;
              h3 {
                line-height: 28px;
                padding-bottom: 14px;
              }
              .lists_bottom_left_bottom {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap-reverse;
                font-size: 10px;
                color: #757575;
                p {
                  line-height: 26px;
                  span {
                    color: #414141;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
